<template>
  <el-dialog title="选择订单转派方式" :visible.sync="visible" width="1000px">
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="第三方物流" name="first"></el-tab-pane>
        <el-tab-pane label="小熊猫配送" name="second"></el-tab-pane>
      </el-tabs>

      <div v-show="activeName === 'first'" class="main-box">
        <el-checkbox-group v-model="checkDeliveryList">
          <el-checkbox label="sf" border class="mr-20">顺丰物流</el-checkbox>
          <el-checkbox label="dd" border>达达配送</el-checkbox>
        </el-checkbox-group>
      </div>

      <div v-show="activeName === 'second'" class="main-box">
        <div
          v-for="(itemmain, key, index) in deliveriesList"
          :key="index"
          style="width: 100%"
          class="deliveriesList"
        >
          <div class="deliveryperson">{{ key }}</div>
          <div class="delivery-item">
            <span
              v-for="item in itemmain"
              :key="item.index"
              :class="{ 'active' : deliver == item.name }"
              @click="handledistror(item)"
              >{{ item.name }}</span
            >
          </div>
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  getdeliveriesList,
} from "@/api/orderDispatch";
export default {
  data() {
    return {
      visible: true,
      activeName: 'first',
      deliveriesList: [],
      deliver: '',
      checkDeliveryList: ['sf', 'dd'],
    }
  },
  methods: {
    show() {
      this.visible = true
      this.getdeliveriesList()
    },
    submit() {

    },
    getdeliveriesList() {
      getdeliveriesList({
        deptId: JSON.parse(localStorage.getItem("saber-areaId"))["content"]
      }).then(response => {
        this.deliveriesList = response.data.data;
      })
    },
    handledistror(item) {
      this.deliver = item.name
    }
  },
  created() {
    this.show()
  }
}
</script>

<style lang="scss" scoped>
.main-box {
  height: 500px;
  max-height: 500px;
  overflow: auto;
  .deliveriesList {
    border-top: 1px solid #ebeef5;
    display: flex;
    line-height: 44px;

    .deliveryperson {
      margin-right: 10px;
    }

    .delivery-item {
      cursor: pointer;
      display: flex;
      flex: 1;
      width: 50%;
      flex-wrap: wrap;

      span {
        width: 90px;
        text-align: center;

        &.active {
          width: 77px;
          height: 32px;
          border-radius: 3px;
          background-color: rgba(238, 248, 232, 1);
          color: rgba(122, 199, 86, 1);
          font-size: 12px;
          border: 1px solid rgba(122, 199, 86, 1);
          text-align: center;
          line-height: 32px;
          margin-top: 6px;
        }
      }
    }

    &:last-child {
      border-bottom: 1px solid #ebeef5;
    }
  }
}
</style>
